import React, { useState } from 'react';
import { openWelcomeModal } from '../../components/modal/RunCode';
import { useStageStore, useNodeStore } from 'codeck';
import 'allotment/dist/style.css';
import { usePersist } from '../../components/ManagerPanel/persist';
import { Menu, Message, Modal, PageHeader, Radio } from '@arco-design/web-react';
import { IconApps, IconBug, IconBulb, IconTool } from '@arco-design/web-react/icon';


const MenuItem = Menu.Item;
const SubMenu = Menu.SubMenu;
export const MenuContent: React.FC = React.memo(() => {
    const {
        open: handleOpen,
        openNode: handleOpenNode,
        save: handleSave,
        saveAs: handleSaveAs,
        newlyBuilt: newlyBuilt,
        currentFileName,
        handleRun: handleRun,
    } = usePersist();
    const [isRealTimeRenderText, setisRealTimeRenderText] = useState('关');

    const url = () => {
        openWelcomeModal();
    };
    const setRealTimeRender = () => {
        if (useStageStore.getState().isRealTimeRender) {
            useStageStore.getState().isRealTimeRender = false;
            setisRealTimeRenderText('开');
        } else {
            useStageStore.getState().isRealTimeRender = true;
            setisRealTimeRenderText('关');
        }
        Message.success({
            content: '性能模式转换',
            style: {
                marginTop: 45
            }
        })
    };
    const copy = () => {
        var rightClickEvent = new MouseEvent("mousedown", {
            bubbles: true,
            cancelable: true,
            view: window,
            button: 1
        });
        document.querySelector('.flow-editor')?.dispatchEvent(rightClickEvent);
    }


    return (
        <>
            <div style={{ position: 'fixed', zIndex: 1009, width: 100 + '%', height: 52 + 'px', backgroundColor: '#242424' }}>
                <PageHeader
                    style={{ padding: '8px 0' }}
                    title={
                        'NODA'
                    }
                    subTitle={currentFileName}
                    // backIcon
                    // onBack={() => Message.info('点击了返回按钮')}
                    extra={
                        <div>
                            <Radio.Group mode='fill' type='button' defaultValue='handleSave'>
                                <Radio value='handleSave' onClick={handleSave} >保存</Radio>
                                <Radio value='copy' onClick={copy}
                                >复制代码</Radio>
                                <Radio value='handleRun' onClick={handleRun}>运行</Radio>
                            </Radio.Group>
                        </div>
                    }
                />
            </div>

            <div className='menu-demo' style={{ marginTop: 52, height: 'calc(100% - 52px)', position: 'absolute', zIndex: 999 }}>
                <Menu
                    style={{ backgroundColor: '#232324', height: '100%' }}
                    hasCollapseButton={false}
                    collapse
                    autoOpen={false}
                    defaultOpenKeys={['0']}
                    defaultSelectedKeys={['0_0', '1_0']}
                >
                    <SubMenu

                        key='0'
                        title={
                            <>
                                <IconApps /> 文件管理
                            </>
                        }
                    >

                        <MenuItem key='0_1' onClick={newlyBuilt}>新建</MenuItem>
                        <MenuItem key='0_2' onClick={handleOpen}>打开文件</MenuItem>
                        <MenuItem key='0_0' onClick={handleSave} >保存至本地</MenuItem>
                        <MenuItem key='0_3' onClick={handleSaveAs}>另存为</MenuItem>
                        <MenuItem key='0_4' onClick={handleOpenNode}>导入节点控件</MenuItem>
                    </SubMenu>
                    <SubMenu

                        key='1'
                        title={
                            <>
                                <IconBug /> 编辑器
                            </>
                        }
                    >
                        <MenuItem key='1_0' onClick={copy}>复制代码</MenuItem>
                        <MenuItem key='1_1' onClick={handleRun}>模拟运行</MenuItem>

                        <MenuItem key='1_2' onClick={() => {
                            useStageStore.getState().focus();
                            Message.success({
                                content: '自动聚焦',
                                style: {
                                    marginTop: 45
                                }
                            })
                        }}>自动聚焦</MenuItem>
                        <MenuItem key='1_3' onClick={setRealTimeRender}>性能模式【{isRealTimeRenderText}】</MenuItem>
                    </SubMenu>
                    <SubMenu

                        key='2'
                        title={
                            <>
                                <IconBulb /> 使用帮助
                            </>
                        }
                    >
                        <MenuItem key='2_3' onClick={() => window.open('https://box3lab.com/noda/control')}>节点控件商城</MenuItem>
                        <MenuItem key='2_1' onClick={() => window.open('https://www.yuque.com/box3lab/doc/hrg3d9nrtowpprkl')}>节点文档</MenuItem>
                        <MenuItem key='2_2' onClick={() => window.open('https://www.yuque.com/box3lab/api')}>Box3API文档</MenuItem>
                        <MenuItem key='2_3' onClick={() => window.open('https://developer.mozilla.org/zh-CN/docs/Web/JavaScript')}>mdnJs参考文档</MenuItem>
                    </SubMenu>
                    <SubMenu

                        key='3'
                        title={
                            <>
                                <IconTool /> 开发工具箱
                            </>
                        }
                    >
                        <MenuItem key='2_3' onClick={() => window.open('https://chatglm.cn/main/gdetail/664484cd878887e0df1d4d2a')}>NODA开发AI顾问</MenuItem>
                        <MenuItem key='3_0' onClick={() => window.open('https://jsoneditoronline.cn/')}>JSON可视化格式化/编辑</MenuItem>
                        <MenuItem key='3_1' onClick={() => window.open('https://www.rapidtables.org/zh-CN/web/color/RGB_Color.html#color-picker')}>RBG可视化颜色读取</MenuItem>
                    </SubMenu>
                </Menu>
            </div>
        </>
    );
})

MenuContent.displayName = 'Menu';

